import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/user_home/user_home_view/user_home_item.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class UserHome extends StatefulWidget {
  const UserHome({Key? key}) : super(key: key);

  @override
  State<UserHome> createState() => _UserHomeState();
}

class _UserHomeState extends State<UserHome> {
  List<String> tabs = ['食谱', '收藏'];

  int current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffFAF7F7),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            toolbarHeight: 30.rpx + HYSizeFit.statusHeight,
            pinned: true,
            centerTitle: true,
            elevation: 0.08,
            leading: InkWell(
              onTap: () => Navigator.pop(context),
              child: Image.asset(
                'assets/images/back_left.png',
                width: 12.rpx,
                height: 24.rpx,
              ),
            ),
            actions: [
              Container(
                width: 30.rpx,
                height: 30.rpx,
                margin: EdgeInsets.only(right: 21.rpx),
                alignment: Alignment.center,
                child: Text(
                  '...',
                  style: TextStyle(
                      color: const Color(0xff333333), fontSize: 32.rpx),
                ),
              ),
            ],
            expandedHeight: 321.rpx,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                width: HYSizeFit.screenWidth,
                height: 315.rpx,
                padding: EdgeInsets.only(top: 97.rpx),
                decoration: BoxDecoration(
                  gradient: RadialGradient(
                    center: Alignment.center,
                    radius: 1, // 控制渐变的范围，1.0表示从中心点开始，更大的值会使渐变效果扩散更广
                    colors: [
                      const Color(0xffFA8303).withOpacity(0.55),
                      const Color(0xffFA8303).withOpacity(0.3),
                      const Color(0xffFA8303).withOpacity(0.0),
                    ],
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 37.rpx, bottom: 19.rpx),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Image.asset(
                            'assets/images/user_avatar'
                            '.png',
                            width: 72.rpx,
                            height: 72.rpx,
                          ),
                          SizedBox(width: 11.rpx),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '爱吃的小徐同学',
                                style: TextStyle(
                                  fontSize: 18.rpx,
                                  color: const Color(0xff333333),
                                ),
                              ),
                              SizedBox(height: 8.rpx),
                              Text(
                                '账号：12556054',
                                style: TextStyle(
                                  fontSize: 12.rpx,
                                  color: const Color(0xff999999),
                                ),
                              ),
                              SizedBox(height: 2.rpx),
                              Text(
                                'IP属地：广东',
                                style: TextStyle(
                                  fontSize: 12.rpx,
                                  color: const Color(0xff999999),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      width: 47.rpx,
                      height: 30.rpx,
                      margin: EdgeInsets.only(left: 44.rpx, bottom: 14.rpx),
                      decoration: BoxDecoration(
                        color: const Color(0xffD3D2D8).withOpacity(0.3),
                        borderRadius: BorderRadius.circular(15.rpx),
                      ),
                      child: Image.asset(
                        'assets/images/nv.png',
                        height: 17.rpx,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 43.rpx, right: 27.rpx),
                      child: Row(
                        children: [
                          Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                _column(text1: '2388', text2: '粉丝'),
                                _column(text1: '6', text2: '关注'),
                                _column(text1: '242', text2: '作品'),
                              ],
                            ),
                          ),
                          Row(
                            children: [
                              Container(
                                width: 79.rpx,
                                height: 30.rpx,
                                alignment: Alignment.center,
                                margin: EdgeInsets.only(
                                    right: 18.rpx, left: 56.rpx),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15.rpx),
                                  color: const Color(0xffFA8303),
                                ),
                                child: Text(
                                  '关注',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 16.rpx),
                                ),
                              ),
                              InkWell(
                                onTap: () => AppTo.goto(context, AppPage.chat),
                                child: Image.asset(
                                  'assets/images/message.png',
                                  width: 34.rpx,
                                  height: 34.rpx,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              collapseMode: CollapseMode.parallax,
            ),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(55.rpx),
              child: Container(
                width: HYSizeFit.screenWidth,
                height: 55.rpx,
                margin: EdgeInsets.only(top: 24.rpx),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15.rpx),
                    topRight: Radius.circular(15.rpx),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(
                    tabs.length,
                    (index) {
                      return InkWell(
                        onTap: () {
                          setState(() {
                            current = index;
                          });
                        },
                        child: SizedBox(
                          width: HYSizeFit.screenWidth / 4,
                          height: double.infinity,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                tabs[index],
                                style: TextStyle(
                                  fontSize: 20.rpx,
                                  color: current == index
                                      ? const Color(0xff333333)
                                      : const Color(0xff999999),
                                ),
                              ),
                              Container(
                                width: 24.rpx,
                                height: 3.rpx,
                                margin: EdgeInsets.only(top: 8.rpx),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(2.rpx),
                                  color: current == index
                                      ? const Color(0xffFA8303)
                                      : Colors.transparent,
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Divider(
              height: 1.rpx,
              color: const Color(0xffcccccc).withOpacity(0.4),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              padding:
                  EdgeInsets.only(left: 31.rpx, right: 31.rpx, top: 32.rpx),
              child: Wrap(
                children: List.generate(
                  userHomeList.length,
                  (index) {
                    return UserHomeItem(
                      index: index,
                      name: userHomeList[index]['name'],
                      text: userHomeList[index]['text'],
                      time: userHomeList[index]['time'],
                      num: userHomeList[index]['num'],
                      color: userHomeList[index]['color'],
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _column({text1, text2}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          text1,
          style: TextStyle(fontSize: 14.rpx, color: const Color(0xff000000)),
        ),
        SizedBox(height: 9.rpx),
        Text(
          text2,
          style: TextStyle(fontSize: 14.rpx, color: const Color(0xff000000)),
        ),
      ],
    );
  }
}
